<template>
  <a-modal v-model='visible' title='创建对账表' @cancel='close' :confirm-loading='confirmLoading' @ok='handleSubmit'>
    <f-form ref='form' :action='api.finance' :form-key='this.formItem.financeId'>
      <f-form-item label='月份:' name='financeMonth' type='month' :value.sync='formItem.financeMonth' :required='true' />
      <f-form-item label='部门' ref='dept' type='select' name='deptId' :value.sync='formItem.deptId' :data='api.dept.list'
                   valueKey='deptId' label-key='deptName' :required='true' @change='deptChange' />
      <f-form-item label='业务员' ref='saleMan' type='select' name='saleManId' :value.sync='formItem.saleManId'
                   :data='api.saleMan.list'
                   valueKey='saleManId' label-key='saleManName' :required='true' :autoLoad='false' />
    </f-form>
  </a-modal>
</template>

<script>
import api from "./js/api"

export default {
  name: "InitFinanceModal",
  model: {
    prop: "value",
    event: "change.value"
  },
  props: {
    otherParams: {}
  },
  data() {
    return {
      refs: this.$refs,
      api: Object.assign(api, this.api),
      visible: false,
      confirmLoading: false,
      formItem: {
        financeMonth: "",
        deptId: null,
        saleManId: null
      }
    }
  },
  methods: {
    open() {
      this.visible = true
    },
    close() {
      this.visible = false
      this.$refs.form.getForm().resetFields()
    },
    handleSubmit(callback) {
      this.$refs.form.submit({}, this.close)
    },
    deptChange(value) {
      this.formItem.deptId = value
      this.$refs.saleMan.initData(this.formItem)
      //清除已选择销售
      this.$refs.form.resetField("saleManId")
    }
  },
  created() {
  }
}
</script>

<style lang='less'>
.upload {
  display: inline-block;
  margin-left: 10px;

  .ant-upload-hint {
    heigh: 300px;
    width: 450px
  }
}
</style>

